import logoImg from '@/assets/img/logo.svg';
import { LoadingState } from '@/layouts';
import { ArrowRightOutlined } from '@ant-design/icons';
import { Button, Col, Form, Row } from 'antd';
import { useState } from 'react';
import { history, useDispatch, useSelector } from 'umi';
import AccountLogin from './components/AccountLogin';
import SmCodeLogin from './components/SmCodeLogin';
import './login.less';
type Form = {
  accountName?: string;
  password?: string;
  mobile?: string;
  code?: string;
};
const Login = () => {
  const [isAccount, setIsAccount] = useState(false);
  const dispatch = useDispatch();

  const [form] = Form.useForm<Form>();
  const loading = useSelector(
    (state: { loading: LoadingState }) => state.loading,
  );

  const submitHandle = (data: Form) => {
    dispatch({
      type: 'user/login',
      payload: { ...data, type: isAccount ? 1 : 0 },
    });
  };

  return (
    <div className="form">
      <div className="logo">
        <img src={logoImg} />
        <span>织信人事管理系统</span>
      </div>
      <Form
        form={form}
        initialValues={{
          accountName: 'admin',
          password: '123qwe',
          mobile: '15070912160',
        }}
        onFinish={submitHandle}
      >
        {!isAccount ? <AccountLogin /> : <SmCodeLogin form={form} />}
        <Row>
          <Button
            type="primary"
            htmlType="submit"
            loading={loading.effects['user/login']}
          >
            登录
          </Button>
        </Row>
        <Row>
          <Col span={6}>
            <p
              className="login-methods-container"
              onClick={() => history.push('/users/forgetpwd')}
            >
              忘记密码？
            </p>
          </Col>
          <Col span={18}>
            <p
              className="login-methods-container login-methods"
              onClick={() => setIsAccount(!isAccount)}
            >
              {!isAccount ? '使用手机号码登录' : '使用账户名密码进行登录'}
              <ArrowRightOutlined />
            </p>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

export default Login;
